import React, {Component} from 'react'

class TodoItem extends Component {
    
    constructor(props) {
        super(props);
    //如果把作用域的修改放在constructor里 ，可以保证 整个函数作用域的操作只会绑定一次，避免子组件的无谓渲染；
        this.handleClick = this.handleClick.bind(this)
    }

    //react 底层 setState(内置) 是异步的函数 ，把多次数据的改变，结合成一次，降低虚拟dom的比对频率
    // 虚拟dom 同层比对 配值的概念

    //当传入的值发生改变时才有重新渲染组件的必要
    shouldComponentUpdate(nextProps, nextState, nextContext) {
        if(nextProps.content !== this.props.content){
            console.log("true")
            return true
        } else{
            console.log("false")
            return false
        } 
        
    }

    render() {
        console.log('render todoItem')
        const {content} = this.props
        return (
            <div onClick={this.handleClick}>{content}</div>
        )
    }

    handleClick() {
        const {deleteItem} = this.props
        deleteItem(this.props.index)
        // console.log(this.props.index)
    }

    

}

export default TodoItem